<template>
  <view  :id="'id_'+readId"  >
	  <slot name="title">
		  <u-sheet no-level @click="emits('title-click')" :transprent="props.transprent" color="grey-3"   v-if="_title!==''" :height="50" _class="flex flex-col flex-col-center-start"
		  :margin="[props.margin[0],0]" :padding="[props.padding[0],0]">
		       <u-text :userInteractionEnabled="false" :font-size="24" _class="text-weight-b opacity-6" :label="_title"></u-text>
		   </u-sheet>
	  </slot>
	  <u-sheet @click="itemClick" color="white" :border="props.showBorder?1:0"  :transprent="props.transprent" borderDirection="bottom" :margin="props.margin" :padding="props.padding">
	      <view :eventPenetrationEnabled="true"  class="flex-1 flex flex-col flex-col-center-start" >
	  		  <slot></slot>
	  	  </view>
	  </u-sheet>
  </view>
</template>

<script lang="ts" setup>
	/**
	 * 列表索引项目
	 * @description 索引列表项目，内部只能放置在u-indexes组件中。
	 */
import { computed,PropType,ref,getCurrentInstance, onUnmounted,onMounted,onUpdated, nextTick } from 'vue';
import uSheet from '../u-sheet/u-sheet.vue';
import tmText from '../u-text/u-text.vue';
const proxy = getCurrentInstance()?.proxy??null;
const emits = defineEmits(["click","title-click"])
const props = defineProps({
    margin:{
        type:Array as PropType<Array<number>>,
        default:()=>[0,0]
    },
    padding:{
        type:Array as PropType<Array<number>>,
        default:()=>[32,0]
    },
    height:{
        type:Number,
        default:100,
    },
	//如果title不为空，此组件就会当分类标题来显示，并隐藏内容。
    title:{
        type:[String,Number],
        default:''
    },
	// 右边快捷显示的标题，只能是一个字符。
	//注意如果title为空时，这个才会显示在右边。不空此字段无任何意义。
	navTitle:{
	    type:[String,Number],
	    default:''
	},
	transprent:{
		type:Boolean,
		default:false,
	},
	showBorder:{
		type:Boolean,
		default:true,
	}
})

const _title = computed(()=>props.title)
const _navTitle = computed(()=>props.navTitle)
const readId = Number(uni.$u.guid(16, false, 10));
let _itemHeight = 0
//父级方法。
let parent:any = proxy.$parent

while (parent) {
    if(parent?.compentNameId=='tmIndexesId'||!parent){
        break;
    }else{
        parent = parent?.$parent??undefined
    }
}
if(parent){
    parent.pushKey(_itemHeight,readId,String(_title.value),String(_navTitle.value))
}
onUnmounted(()=>parent.delKey(_itemHeight,readId))
onMounted(()=>getRect())
onUpdated(()=>getRect())
function getRect(){
	let id = '#id_'+readId;
	// #ifdef MP
	uni.createSelectorQuery()
		.in(proxy)
		.select(id)
		.boundingClientRect()
		.exec(ret => {
			_itemHeight = ret[0].height;
			parent.pushKey(ret[0].height,readId,String(_title.value),String(_navTitle.value))
		})
	// #endif
}
function itemClick(){
	emits("click")
}
</script>

<style>

</style>
